
/*
 * ===============================
 * Paul Walter Styles 
 * ===============================
*/
html {
	height: 100%;
}
body {
	/*
	 * Embed the local font so it looks the same on all browsers. 
	 */
	@font-face {

		font-family: 'Georgia Local';
		src: URL('fonts/Georgia.ttf') format ('ttf');
	}

	/*
	 * Set the font to be georgia. 
	 */
	font-family: 'Georgia Local', helvetica, arial, sans-serif;
    
	/*
	 * Set the background gradient. 
	 */
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url();
	background: -moz-linear-gradient(top, #ffffff 2%, #c9dbe9 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#ffffff), color-stop(99%,#c9dbe9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 2%,#c9dbe9 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 2%,#c9dbe9 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 2%,#c9dbe9 99%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 2%,#c9dbe9 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c9dbe9',GradientType=0 ); /* IE6-8 */
	
	/*
	 * Fixing a full screen gradient bug, without this, the gradient will only be as tall as the tallest display element. 
	 */
	height: 100%;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


#content{
	min-height: 20em;
	width: auto;
	padding: 1em 10em ;
	font-family: sans-serif;
	margin-top: .2em;
	
	font-family: 'Georgia Local';
}

#content h2{
	font-size: 1.5em;
	padding: .5em 0;
	
}

#content h3{
	font-size: 1em;
	font-weight: bold;
	padding: .5em 0;
	padding-top: 1em;
}

#content p, #content li{
	padding: .5em 0;
	font-size: .9em;
}

#content ul{
	padding-left: 1em;
	margin-left: 1em;
}

#content li{
	list-style: circle;
}

#header{
    height: 2em;
}

#footer
{
	min-height: 3em;
}

.project-article
{
	width: 70%;
}

#contact_form
{
	font-size: .9em;
	width: 60%;
}

#contact_form label
{
	float: left;
	width: 100px;
}

#contact_form input, #contact_form  textarea
{
	width: 100%;
	display: block;
}

textarea
{
	font-family: 'Georgia Local', helvetica, arial, sans-serif;
	font-size: .9em;
}

/* Button Styles from: http://www.cssbuttongenerator.com/ */;

.blueBtnStyle {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:.9em;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
}

.blueBtnStyle:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}

.blueBtnStyle:active {
	position:relative;
	top:1px;
}


.transparentBtn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:transparent;
	-moz-border-radius:14px;
	-webkit-border-radius:14px;
	border-radius:14px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:10px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.transparentBtn:active {
	position:relative;
	top:1px;
}




/*
 * ============================================
 * General navigation style and behavior.
 *
 * Initial navigation idea from "The Code Player":
 * @see http://thecodeplayer.com/walkthrough/make-a-simple-navigation-with-hover-transitions
 * ============================================
 */
.nav
{
	overflow: hidden;
	color: #000;
}

.nav li
{
	cursor: pointer;
	list-style-type: none;
	float: left;
	    
	
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.nav h2 {
	font-family: 'Georgia Local';
	font-style: italic;
	font-size: 1.5em;
	margin-bottom: .1em;
}

.nav li, .nav p {
	font-size: .6em;
	
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
}

.nav li:hover {
	background: #000;
	color: #fff;
}

.nav li:hover h2 {
    font-weight: bold;
    color: #fff;
}

.nav li:hover p {
    color: #ccc;
    padding-left: 1em;
}




/*
 * ============================================
 * Primary Navigation Styles
 * ============================================
 */

#nav_primary
{
	margin-left: 10em;
	background: #F3F3F3;
	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
	margin-bottom: 1.5em;
}

#nav_primary li
{
	border-left: .5em solid #969696;
	padding: 10px 30px 10px 15px;
}

#nav_primary li, #nav_primary h2
{
	font-weight: bold;
}

#nav_primary p
{
	font-family: 'Lucida Grande';
	font-weight: normal;
	font-size: 1em;
}




/*
 * This style gets applied to the primary navigation element
 * to visually indicate that it was selected. 
 */
.nav_primary_selected_li {
    color: #000;
    background: #fff;
    border-left: .5em solid #000;
}

/*
 * ============================================
 * Secondary Navigation Styles
 * ============================================
 */

#nav_secondary
{
	height: 100%;
	min-height: 2em;
	background: #F5F5F5;
	padding: .5em;
	margin-bottom: .5em;
	
	
}

#nav_secondary li
{
	padding: .5em 2em ;
	float: left;
	width: auto;
}

#nav_secondary li, #nav_secondary h2 {
    font-size: .8em;
    
}

#nav_secondary li, #nav_secondary p {
    font-size: 1em;
}

/*
 * This style gets applied to the primary navigation element
 * to visually indicate that it was selected. 
 */
.nav_secondary_selected_li {
    color: #000;
    background: #fff;
}

/*
 * Bread Crumbs
 */
#breadcrumbs
{
	background: #FaFaFa;
	padding: .5em 3em ;
	font-size: .8em;
}


#container
{
    width: 60em;

    /*  float the container in the middle of the browser window*/
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: .2em;
    
    /* give it a fun border */
    border-width: .5em;
    border-color: #eee;
    border-style: solid;
    border-radius: .9em;
    
    /* give it a good ole dropshadow to give the illusion of depth and tangibility */
    box-shadow: 0 25px 10px 2px rgba(0, 0, 0, 0.2);
    
    /*
     * Set the linear gradient
     *
     * From: http://www.colorzilla.com/gradient-editor/
    
    */
    background: #c9dbe9; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top,  #c9dbe9 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9dbe9), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c9dbe9 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c9dbe9 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c9dbe9 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #c9dbe9 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9dbe9', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

